<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <el-row>
        <el-col :span="24">
          <el-form inline @submit.native.prevent="search">
            <el-form-item label="搜索">
              <el-input
                v-model="searchForm.queryConditions"
                clearable
                placeholder=""
                prefix-icon="el-icon-search"
                style="width: 200px"
                size="medium"
              />
            </el-form-item>

            <el-form-item label="产品类型">
              <el-select
                v-model="purchaserProductList.productName"
                clearable
                placeholder="全部"
                style="width: 150px"
                @change="productSelected"
              >
                <el-option
                  v-for="item in purchaserProductList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.productName"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="审核状态">
              <el-select
                v-model="searchForm.state"
                clearable
                placeholder="全部"
                style="width: 150px"
                @change="stateSelected"
              >
                <el-option value="1" label="已通过" />
                <el-option value="-1" label="已驳回" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button native-type="submit" size="medium" type="primary"
                >搜索</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div>
        <el-table
          :data="list"
          border
          style="width: 100%"
          v-loading="recordsLoading"
        >
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          />
          <el-table-column label="样例" width="70" align="center">
            <template slot-scope="scope">
              <el-avatar
                shape="square"
                :src="scope.row.productBriefInfo.imgUrl"
              ></el-avatar>
            </template>
          </el-table-column>

          <el-table-column label="产品名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.productBriefInfo.productName }}
            </template>
          </el-table-column>

          <el-table-column label="供应商" align="center">
            <template slot-scope="scope">
              {{ scope.row.supplier.username }}
            </template>
          </el-table-column>
          <el-table-column prop="applyTime" label="申请时间" align="center" />
          <el-table-column prop="verifyTime" label="审核时间" align="center" />
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <font style="color: red">
                {{ scope.row.state === 1 ? "已通过" : "已驳回" }}
              </font>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-tooltip content="查看供应商信息" placement="top">
                <el-button
                  size="medium"
                  icon="el-icon-search"
                  circle
                  @click="showDialog(scope.row)"
                />
              </el-tooltip>
              <el-tooltip content="删除记录" placement="top">
                <el-button
                  size="medium"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteQualificationApply(scope.row)"
                />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          :current-page="paging.current"
          :page-sizes="paging.pageSizes"
          :page-size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <Dialog
        :visible="qualificationVisible"
        :main-info="supplierInfo"
        @cancel="cancel"
      />
    </el-card>
  </div>
</template>

<script>
//import { deleteQualificationApplyInfo } from "@/api/product";
import { getSupplierMainInfo } from "@/api/supplier";

import {
  getAllQualificationHasAppliedByPurchaserId,
  getAllProductsByPurchaserId,
} from "@/api/verifyQualification";
import Dialog from "./components/Dialog";

export default {
  name: "VerifyQualification",
  components: { Dialog },
  data() {
    return {
      searchForm: {
        queryConditions: "",
        productId: "",
        state: "",
      },
      purchaserProductList: [],
      value: "",
      list: [],
      paging: {
        total: 0,
        current: 1,
        pageSizes: [5, 10, 15],
        size: 5,
      },
      qualificationVisible: false,
      recordsLoading: false,
      productInfo: {},
      supplierInfo: {},
      multipleSelection: [], //复选框选中的所有数据
      dialogTitle: "",
      index: 0, // 0 添加；1 编辑；2 查看信息
      // headers: {
      //   Authorization: getToken(),
      // },
    };
  },
  computed: {
  },
  created() {
    this.recordsLoading = true;
    this.getData();
    this.getPurchaserProduct();
    // console.log(getToken())
  },
  methods: {
    async getPurchaserProduct() {
      const result = await getAllProductsByPurchaserId({
        purchaserId: this.$store.getters.accountId,
      });
      this.purchaserProductList = result.data;
      // console.log('@@@@',this.purchaserProductList)
    },
    search() {
      this.paging.current = 1;
      this.recordsLoading = true;
      this.getData();
    },
    getData() {
      const form = {
        ...this.searchForm,
        page: this.paging.current,
        pageSize: this.paging.size,
        accountId: this.$store.getters.accountId,
      };
      getAllQualificationHasAppliedByPurchaserId(form)
        .then(({ data }) => {
          console.log(data);
          this.list = data.qualificationSupplierInfos;
          //this.paging.size = data.size
          this.paging.total = data.totalCount;
          this.recordsLoading = false;
        })
        .catch((err) => {
          // 如果没有数据就显示为空
          this.list = [];
          // 返还每页显示的条数
          //this.paging.size = res.data.size;
          this.paging.total = 0;
          this.recordsLoading = false;
        });
    },
    handleSizeChange(val) {
      this.paging.current = 1;
      this.paging.size = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.paging.current = val;
      this.getData();
    },
    showDialog(row) {
      console.log("@@@@@", row);
      this.productInfo = this.extendCopy(row.productBriefInfo);
      getSupplierMainInfo({ supplierId: row.supplier.accountId }).then(
        (res) => {
          console.log("res.data:", res.data);
          if (res.code === 200) {
            this.supplierInfo = res.data;
            this.qualificationVisible = true;
          }
        }
      );
      console.log("@@@@@supplierInfo", this.supplierInfo);
      this.index = 2;
    },
    // deleteQualificationApply(row) {
    //   this.$confirm("此操作将永久删除这条数据, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(async () => {
    //       const result = await deleteQualificationApplyInfo({ id: row.id });
    //       console.log(result);
    //       if (result.code === 200) {
    //         this.$message({
    //           type: "success",
    //           message: "删除成功!",
    //         });
    //         this.getData();
    //       }
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
    productSelected(val) {
      console.log("val:", val);
      this.searchForm.productId = val;
      this.search();
    },
    stateSelected(val) {
      console.log("val:", val);
      this.searchForm.state = val;
      this.search();
    },
    // 对象的深拷贝
    // 对象进行深拷贝，否则“编辑”框内修改内容也会影响到页面
    extendCopy(p) {
      var c = {};
      for (var i in p) {
        c[i] = p[i];
      }
      return c;
    },

    cancel() {
      this.qualificationVisible = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.btn {
  float: right;
  margin-left: 20px;
}
</style>
